<template>
  <div>
    <div class="query-from" v-has="'menu-query'">
      <el-form
        :inline="true"
        class="demo-form-inline"
        ref="searchForm"
        :model="data"
      >
        <el-form-item label="菜单名称" label-width="100px" prop="userEmail">
          <el-input
            v-model="data.menuName"
            autocomplete="false"
            placeholder="请输入菜单名称"
          />
        </el-form-item>
        <el-form-item label="菜单状态" label-width="100px" prop="state">
          <el-select v-model="data.menuState" placeholder="请选择状态">
          
            <el-option label="正常" :value="1" />
            <el-option label="停用" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getsearchList">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="menuAdd(1)" v-has="'menu-create'">新增</el-button>
      </div>
      <el-table
        :data="menuList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
        v-loading="loading"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template #default="scope">
            <el-button type="primary" @click="menuAdd(2, scope.row)" v-has="'menu-create'"
              >新增</el-button
            >
            <el-button type="primary" @click="menuEdit(scope.row)" v-has="'menu-edit'"
              >编辑</el-button
            >
            <el-button type="danger" @click="menuDelete(scope.row)" v-has="'menu-delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="example-pagination-block">
     
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="getpages" :page-size="pager.pageSize"/>
  </div> -->
      <el-dialog
        v-model="dialogVisible"
        :title="action == 'add' ? '新建用户' : '修改用户'"
        @close="resetData"
      >
        <el-form :model="data" ref="dialogForm" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId" label-width="100px">
            <el-cascader
              v-model="data.parentId"
              :options="menuList"
              :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
              clearable
            />

            <span>不选，默认形成第一菜单</span>
          </el-form-item>

          <el-form-item label="菜单类型" prop="menuType" label-width="100px">
            <el-radio-group v-model="data.menuType" class="ml-4">
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="菜单名称" prop="menuName" label-width="100px">
            <el-input v-model="data.menuName" autocomplete="false" />
          </el-form-item>

          <el-form-item
            label="菜单图标"
            prop="icon"
            label-width="100px"
            v-show="data.menuType == 1"
          >
            <el-input v-model="data.icon" autocomplete="false" />
          </el-form-item>

          <el-form-item
            label="路由地址"
            prop="path"
            label-width="100px"
            v-show="data.menuType == 1"
          >
            <el-input v-model="data.path" autocomplete="false" />
          </el-form-item>

          <el-form-item
            label="组件路径"
            label-width="100px"
            prop="component"
            v-show="data.menuType == 1"
          >
            <el-input v-model="data.component" autocomplete="false" />
          </el-form-item>

          <el-form-item
            label="菜单状态"
            prop="menuState"
            label-width="100px"
            v-show="data.menuType == 1"
          >
            <el-radio-group v-model="data.menuState" class="ml-4">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="权限标识"
            prop="menuCode"
            label-width="100px"
            v-show="data.menuType == 2"
          >
            <el-input v-model="data.menuCode" autocomplete="false" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button type="primary" @click="handleSubmit(dialogForm)">{{
              action == "add" ? "新建" : "修改"
            }}</el-button>
            <el-button @click="dialogVisible = !dialogVisible">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import api from "../api/index.js";
import { ref, reactive, toRaw, nextTick } from "vue";
import utils from "../utils/index.js";
import { ElMessage, formatter } from "element-plus";
const data = reactive({
  parentId: [null],
  menuType: 1,
  menuState: 1,
});
//加载动画
const loading=ref(true)
//定义校验规则
const rules = reactive({
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 10,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
});

//菜单对象
const dialogForm = ref(null);
// 菜单数据
const form = reactive({
  menuType: 1,
});
//表格头
const columns = reactive([
  {
    label: "菜单名称",
    prop: "menuName",
    width: 150,
  },
  {
    label: "图标",
    prop: "icon",
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter(row, column, value) {
      return {
        1: "菜单",
        2: "按钮",
      }[value];
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    formatter: (row, column, value) => {
      return {
        1: "正常",
        2: "停用",
      }[value];
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);
//展示编辑框
const dialogVisible = ref(false);
const menuList = ref([]);
//定义记录用户行为
const action = ref("");
//定义新建弹窗
const menuAdd = (n, row) => {
  dialogVisible.value = !dialogVisible.value;
  action.value = "add";
  data.action = action.value;
  if (n != 1) {
    //
    console.log(row._id);
    data.parentId = [...row.parentId, row._id].filter((ele) => ele);
  }
};
//定义编辑弹窗
const menuEdit = (row) => {
  dialogVisible.value = !dialogVisible.value;
  action.value = "edit";
  data.action = action.value;
  console.log(row);
  nextTick(() => {
    Object.assign(data, row);
  });
  console.log(data);
};
//定义删除方法
const menuDelete = (row) => {
  action.value = "delete";
  dialogVisible.value = !dialogVisible.value;
  data = { _id: row._id, action: action.value };
  sendData();
};
const getMenuList = async () => {
  loading.value=false
  let result;
  try {
    result = await api.getMenuList(data);
  } catch (error) {
    console.log(error.data);
    loading.value=true
  }

  if (result.data.code == 200) {
    loading.value=false
    
    menuList.value = result.data.data;
  
  }
};
const handleSubmit = () => {
  dialogForm.value.validate((vaild) => {
    if (vaild) {
      sendData();
    }
  });
};

//发送提交请求
const sendData = async () => {
  console.log(data);
  let result;
  dialogVisible.value = false;

  try {
    result = await api.menuOperate(toRaw(data));
  } catch (error) {
    console.log(error.data);
  }

  if (result.data.code == 200) {
    dialogVisible.value = false;

    getMenuList();
    ElMessage.success("修改成功");
  }
};
//重置请求数据
const resetData = () => {
  console.log(1111);
  dialogForm.value.resetFields();
  delete data.menuName
  data.parentId = [null];
  data.menuType = 1;
  data.menuState = 1;
};

const reset=()=>{
  delete data.menuName
   data.parentId = [null];
  data.menuType = 1;
  data.menuState = 1;
  getMenuList()
}
//发送搜索请求
const getsearchList = () => {
  getMenuList();

  data.parentId = [null];
  data.menuType = 1;
  data.menuState = 1;
  // resetData()
};
getMenuList();
</script>

<style lang="scss" scoped>
.query-from {
  width: 100%;
  background-color: white;
  .demo-form-inline {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    .el-form-item {
      margin: 0;
    }
  }
}
.base-table {
  overflow: hidden;
  .action {
    margin: 20px 20px;
  }
}

.user-managee {
  overflow: hidden;
}
.example-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
</style>
